<template>
  <view class="container">
    <!-- Header with search and add button -->
    <view class="header">
      <uni-search-bar v-model="searchTerm" @confirm="fetchDoctors" placeholder="搜索医生" class="search-bar"></uni-search-bar>
      <uni-button type="primary" size="mini" @click="openAddPopup">新增医生</uni-button>
    </view>

    <!-- Doctor list table -->
    <uni-table :border="true">
      <uni-tr>
        <uni-th align="center">医生姓名</uni-th>
        <uni-th align="center">专长</uni-th>
        <uni-th align="center">联系方式</uni-th>
        <uni-th align="center">操作</uni-th>
      </uni-tr>
      <uni-tr v-for="doctor in filteredDoctors" :key="doctor.id">
        <uni-td align="center">{{ doctor.name }}</uni-td>
        <uni-td align="center">{{ doctor.specialty }}</uni-td>
        <uni-td align="center">{{ doctor.contact }}</uni-td>
        <uni-td align="center">
          <uni-button type="default" size="mini" @click="openEditPopup(doctor)">编辑</uni-button>
          <uni-button type="error" size="mini" @click="openDeletePopup(doctor)">删除</uni-button>
        </uni-td>
      </uni-tr>
    </uni-table>

    <!-- Popup for adding/editing a doctor -->
    <uni-popup ref="editPopup" type="center">
      <view class="popup-container">
        <h3>{{ currentDoctor.id ? '编辑医生' : '新增医生' }}</h3>
        <view class="form-row">
          <label>医生姓名：</label>
          <input v-model="currentDoctor.name" class="input-field" />
        </view>
        <view class="form-row">
          <label>专长：</label>
          <input v-model="currentDoctor.specialty" class="input-field" />
        </view>
        <view class="form-row">
          <label>联系方式：</label>
          <input v-model="currentDoctor.contact" class="input-field" />
        </view>
        <view class="form-row">
          <label>门店ID：</label>
          <input v-model="currentDoctor.shop_id" class="input-field" />
        </view>
        <view class="button-group">
          <uni-button type="primary" size="small" @click="saveDoctor">保存</uni-button>
          <uni-button type="default" size="small" @click="closePopup">取消</uni-button>
        </view>
      </view>
    </uni-popup>

    <!-- Popup for confirming deletion -->
    <uni-popup ref="deletePopup" type="center">
      <view class="popup-container">
        <h3>确认删除</h3>
        <text>确定要删除 "{{ currentDoctor.name }}" 吗？</text>
        <view class="button-group">
          <uni-button type="error" size="small" @click="confirmDelete">删除</uni-button>
          <uni-button type="default" size="small" @click="closePopup">取消</uni-button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      doctors: [],
      filteredDoctors: [],
      currentDoctor: {},
      shopId: 1 // 示例门店ID
    };
  },
  methods: {
    async fetchDoctors() {
      const res = await this.$myRuquest({
        url: `/index/plugin.doctors/getDoctors?shop_id=${this.shopId}&searchTerm=${this.searchTerm}`,
        method: 'GET'
      });
      if (res.data.code === 200) {
        this.doctors = res.data.data;
        this.filterDoctors();
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000
        });
      }
    },
    filterDoctors() {
      if (this.searchTerm) {
        this.filteredDoctors = this.doctors.filter(doctor =>
          doctor.name.includes(this.searchTerm) ||
          doctor.specialty.includes(this.searchTerm) ||
          doctor.contact.includes(this.searchTerm)
        );
      } else {
        this.filteredDoctors = this.doctors;
      }
    },
    openAddPopup() {
      this.currentDoctor = { id: null, shop_id: this.shopId, name: '', specialty: '', contact: '' };
      this.$refs.editPopup.open();
    },
    openEditPopup(doctor) {
      this.currentDoctor = Object.assign({}, doctor);
      this.$refs.editPopup.open();
    },
    closePopup() {
      this.$refs.editPopup.close();
      this.$refs.deletePopup.close();
    },
    async saveDoctor() {
      const method = this.currentDoctor.id ? 'PUT' : 'POST';
      const res = await this.$myRuquest({
        url: '/index/plugin.doctors/saveDoctor',
        method: method,
        data: this.currentDoctor
      });
      if (res.data.code === 200) {
        uni.showToast({
          title: '保存成功',
          icon: 'success',
          duration: 2000
        });
        this.fetchDoctors();
        this.closePopup();
      } else {
        uni.showToast({
          title: res.data.info,
          icon: 'none',
          duration: 2000
        });
      }
    },
    openDeletePopup(doctor) {
      this.currentDoctor = Object.assign({}, doctor);
      this.$refs.deletePopup.open();
    },
    async confirmDelete() {
      const res = await this.$myRuquest({
        url: '/index/plugin.doctors/deleteDoctor',
        method: 'DELETE',
        data: { id: this.currentDoctor.id }
      });
      if (res.data.code === 200) {
        uni.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 2000
        });
        this.fetchDoctors();
        this.closePopup();
      } else {
        uni.showToast({
          title: res.data.info,
          icon: 'none',
          duration: 2000
        });
      }
    },
    checkLoginStatus() {
      const token = uni.getStorageSync('token');
      if (token) {
        this.isLoggedIn = true;
        this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
        this.fetchDoctors();
      } else {
        this.isLoggedIn = false;
        this.userInfo = {};
        this.$router.push('/pages/login/login');
      }
    }
  },
  mounted() {
    this.checkLoginStatus();
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #fff;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.search-bar {
  flex: 1;
  max-width: 50%;
  margin: 0 10px;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
}

label {
  width: 100px;
  color: #666;
  margin-right: 10px;
  text-align: right;
}

.input-field {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}

.popup-container {
  width: 80%;
  max-width: 800px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  width: 100%;
}
</style>
